<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- <!DOCTYPE html>
<html lang="zh-cn"> -->
    <head>
        <!-- <meta charset="UTF-8"/> -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>多行文字垂直居中-需要html4过渡型才有效</title>
        <style>
            body {
                margin: 0;
                font-size: 84%;
                background: #eee;
                color: #333;
                font-family: Verdana, Geneva, sans-serif;
            }
            .zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
            .zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}
            #hidden_three_line {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>大小不固定的图片、多行文字的水平垂直居中-需要html4过渡型才有效</h1>
        <p>来源:<a href="http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/">网址</a></p>
        <div class="zxx_align_box_2">
            <span class="zxx_align_word">这里的文字用来做多行文字垂直居中对齐的测试。<br>这是第二行文字，您还可以再<a id="a_add" href="#zhangxinxu" onclick="javascript:document.getElementById('hidden_three_line').style.display='inline';">添加</a>一行文字做测试！<span id="hidden_three_line"><br>这是隐藏的第三行文字，注意到文字的变化没，依旧垂直居中。</span></span>
        </div>
        <script>
            (function(event){javascript:document.getElementById('hidden_three_line').style.display='inline';
            })
        </script>
    </body>
</html>